
 var count = 0, check = 0;
 var  tapX,tapY;
 var coinImage = new Image();
 coinImage.src = "images/coin-sprite-animation.png";

 function gameLoop() {
 window.requestAnimationFrame(gameLoop);

 coin1.update();
 coin2.update();

 coin1.render();
 coin2.render();
 }
 
 // Start the game loop as soon as the sprite sheet is loaded
 coinImage.addEventListener("load", gameLoop);

 function sprite(options) {

 var that = {}, frameIndex = 0, tickCount = 0, i = options.i || 0, j = options.j || 0, ticksPerFrame = options.ticksPerFrame || 0, numberOfFrames = options.numberOfFrames || 1;
 that.i = options.i;
 that.j = options.j;
 that.context = options.context;
 that.width = options.width;
 that.height = options.height;
 that.image = options.image;
 that.loop = options.loop;
 that.update = function() {
 tickCount += 1;
 if (tickCount > ticksPerFrame) {
 tickCount = 0;
 // If the current frame index is in range
 if (frameIndex < numberOfFrames - 1) {
 // Go to the next frame
 frameIndex += 1;
 } else if (that.loop) {
 frameIndex = 0;
 } else {
 frameIndex = 0;
 }
 }
 };

 that.checkdistance=function(){
 if (tapX >= i && tapX <= i + 100) {
 if (tapY >= j && tapY <= j + 100) {
 count++;
 check = 1;
 if (count == 2) {
 count = 0;
 check = 0;
 coin1.restartgame();
 coin2.restartgame();
 }
 }
 }
 }

 that.remove = function() {
 that.context.clearRect(0, 0, that.width, that.height);
 i = 9000;
 j = 9000;
 };
 that.restartgame = function() {
 that.context.clearRect(0, 0, that.width, that.height);
 i = (Math.random() * (500));
 j = (Math.random() * (500));
 };

 that.render = function() {
 // Clear the canvas
 that.context.clearRect(i, j, that.width, that.height);
 // Draw the animation
 that.context.drawImage(that.image, frameIndex * that.width / numberOfFrames, 0, that.width / numberOfFrames, that.height, i, j, that.width / numberOfFrames, that.height);
 };
 return that;
 }

 var canvas = document.getElementById("coinAnimation");
 canvas.width = 1000;
 canvas.height = 1000;

 var coin1 = sprite({
 context : canvas.getContext("2d"),
 width : 1000,
 height : 1000,
 i : (Math.random() * (100)),
 j : (Math.random() * (100)),
 image : coinImage,
 numberOfFrames : 10,
 ticksPerFrame : 4
 });
 var coin2 = sprite({
 context : canvas.getContext("2d"),
 width : 1000,
 height : 1000,
 i : (Math.random() * (100)),
 j : (Math.random() * (100)),
 image : coinImage,
 numberOfFrames : 10,
 ticksPerFrame : 1
 });

 canvas.addEventListener("mousedown", tap);
 function tap(e) {

 tapX = e.targetTouches ? e.targetTouches[0].pageX : e.pageX, tapY = e.targetTouches ? e.targetTouches[0].pageY : e.pageY;
 coincheckdistance();

 if(check==1)
 {
 coin1.remove();
 check=0;
 }
 coin2.checkdistance();

 if(check==1)
 {
 check=0;
 coin2.remove();
 }
 }
